@charset "UTF-8";
@import "../common/scss/mixins";

.detail-layer{
    display:none;
	&,.detail-mask{
		position:absolute;
		left:0;
		top:0;
		right:0;
		bottom:0;
	}
	z-index:11000;
	.detail-mask{
	    opacity: 0.7;
		background-color: rgba(0, 0, 0, 1);
		transition:  all 1s;
	}
}
.tab-container{
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
	background-color:#fff;
	.tab-nav{
		position: relative;
		width: 100%;
		height: 100%;
		z-index: 1;
		@each $prefix in '-webkit-','-moz-', '-o-','-ms-','' {
		  #{$prefix}transition-property: #{$prefix}transform;
		}
		@each $prefix in '-webkit-','-moz-', '' {
		  #{$prefix}box-sizing: content-box;
		}
		@extend .flex-row;
		.nav-item{
			@extend .flex-item;
			width: 100%;
			font-size:$fs15;
			color:$color01;
			height: 4.2rem;
			line-height:3.9rem;
			text-align: center;
			border-bottom:1.5px solid $border01;
			&.active-nav{
				color:$color06;
			}
		}
	}
	.tab-content{
		height:14rem;
		@include scrolling;
		.content-item{
			height: 100%;
			overflow: auto;
		  display:none;
		  .article{
			padding:1.4rem;
			color:$color02;
			line-height: 1.8rem;
			*{
			  max-width: 100%;
			  box-sizing: border-box;
			  word-wrap: break-word;
			}
			img{
			  max-width: 100%;
			  height: auto;
			  position: static;
			  display: block;
			}
		  }
		}
	}
  .swiper-scrollbar-drag {
    transform: translate3d(6.8rem, 0px, 0px);
    @each $prefix in '-webkit-','-moz-', '-o-','' {
      #{$prefix}transition: all 0.3s linear;
    }
    height: 0.3rem;
    line-height: 0;
    font-size: 0;
    width: 2.45rem;
    background: $border03;
    position: absolute;
    bottom: 0;
    z-index: 50;
    left:0;
  }
  .swiper-scrollbar {
    .one-border{
      position: relative;
      font-size: 0;line-height: 0;overflow: hidden;
      border-top:1.5px solid $border01;
      top: 0.1rem;
    }
    position: absolute;
    left: 0;
    bottom: 0;
    height: 0.3rem;
    overflow: hidden;
    width: 100%;
  }
}
.nav-swiper,.detail-swiper{
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  z-index: 1;
  .swiper-wrapper{
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    @each $prefix in '-webkit-','-moz-', '-o-','-ms-','' {
      #{$prefix}transition-property: #{$prefix}transform;
    }
    @each $prefix in '-webkit-','-moz-', '' {
      #{$prefix}box-sizing: content-box;
    }
    @extend .flex-row;
  }
  .swiper-slide{
    -webkit-flex-shrink: 0;
    -ms-flex: 0 0 auto;
    flex-shrink: 0;
    position: relative;

  }
}
.hp14{
	padding:0 1.4rem;
}
.nav-swiper{
  line-height: 4rem;
  .swiper-wrapper{
	padding-bottom: 0.1rem;
  }
  
  .swiper-slide {
    width: 100%;
    font-size:$fs15;
    color:$color01;
    height: 4.2rem;
    line-height:3.9rem;
    text-align: center;
	border-bottom:1.5px solid $border01;
    &.active-nav{
		color:$color06;
	}
  }
  .swiper-scrollbar-drag {
    transform: translate3d(6.8rem, 0px, 0px);
    @each $prefix in '-webkit-','-moz-', '-o-','' {
      #{$prefix}transition: all 0.3s linear;
    }
    height: 0.3rem;
    line-height: 0;
    font-size: 0;
    width: 2.45rem;
    background: $border03;
    position: absolute;
    bottom: 0;
    z-index: 50;
    left:0;
  }
  .swiper-scrollbar {
    .one-border{
      position: relative;
      font-size: 0;line-height: 0;overflow: hidden;
      border-top:1.5px solid $border01;
      top: 0.1rem;
    }
    position: absolute;
    left: 0;
    bottom: 0;
    height: 0.3rem;
    overflow: hidden;
    width: 100%;
  }
}

.detail-tab{
	background-color:$bg02;
  .nav-swiper{
    background:$bg00;
  }
  .article{
    padding:1.4rem;
    color:$color02;
    line-height: 1.8rem;

	 overflow: scroll;
    *{
      max-width: 100%;
      box-sizing: border-box;
      word-wrap: break-word;
    }
    img{
      max-width: 100%;
      height: auto;
      position: static;
      display: block;
    }
  }
}

.detail-swiper{
  overflow: auto;
  -webkit-overflow-scrolling: touch;
	max-height:20rem;
}